<template>
  <el-container class="list-container">
    <el-header class="main-header">
      <el-row class="header-row">
        <el-col :span="2" class="system-name">
          后台管理系统
        </el-col>
        <el-col :span="20" class="header-placeholder" />
        <el-col :span="2" class="logout-btn">
          <el-button type="info" @click="handleLogout">退出</el-button>
        </el-col>
      </el-row>
    </el-header>

    <el-container class="main-container">
      <el-aside width="200px" class="side-menu">
        <el-menu :default-active="activeMenu" background-color="$menu-bg-color" text-color="$menu-text-color"
          active-text-color="$menu-active-color">

          <el-submenu v-for="menu in menus" :key="menu.id" :index="String(menu.id)">

            <template #title>
              <i class="el-icon-location" />
              <span>{{ menu.authName }}</span>
            </template>

            <el-menu-item v-for="subMenu in menu.children" :key="subMenu.id" @click="navigateTo(subMenu.path)">
              {{ subMenu.authName }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main class="content-area">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import http from '@/mixins/http'

export default {
  mixins: [http()],

  data: () => ({
    activeMenu: '2',
    menus: []
  }),

  methods: {
    navigateTo(path) {
      this.$router.push({ name: path })
    },

    async fetchMenus() {
      try {
        const { data: { data } } = await this.$httpGet('/menus')
        this.menus = data
      } catch (error) {
        this.$message.error('菜单加载失败')
        console.error('API Error:', error)
      }
    }
  },

  created() {
    this.fetchMenus()
  }
}
</script>

<style lang="scss">
$menu-bg-color: rgb(64, 131, 205);
$menu-text-color: #fff;
$menu-active-color: #fff;

.list-container {
  height: 100vh;

  .main-header {
    background: $menu-bg-color;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .system-name {
      color: $menu-text-color;
      font-weight: 500;
    }

    .logout-btn {
      display: flex;
      justify-content: flex-end;
    }
  }

  .side-menu {
    background: $menu-bg-color;

    .el-menu {
      border-right: none;
    }
  }

  .content-area {
    background: #f0f2f5;
    padding: 20px;
  }
}
</style>